<template>
  <div class="timePickerDemo">
    <div class="popup-div">
      <van-button type="primary" size="big" @click="popClickShow()"
        >带弹出层TimePicker</van-button
      >
    </div>

    <!-- 自定义timepicker -->
    <van-popup
      v-model="popShow"
      position="bottom"
      style="margin"
      round
      safe-area-inset-bottom
    >
      <van-datetime-picker
        ref="datetimePicker"
        v-model="currentTime"
        type="time"
        title="选择时间"
        :show-toolbar="false"
        :min-hour="0"
        :max-hour="23"
        :formatter="formatter"
        @change="pickerChange"
      >
        <template slot="columns-top">
          <div class="picker-top-div">自定义头</div>
        </template>
        <template v-slot:option="option">
          <div class="picker-top-div">{{ option }}</div>
        </template>
        <template slot="columns-bottom">
          <div class="picker-bottom-div">
            <van-button type="primary" size="small" @click="commit()"
              >确定</van-button
            >
            <van-button type="warning" plain size="small">取消</van-button>
          </div>
        </template>
      </van-datetime-picker>
    </van-popup>
    <!-- 自定义timepicker -->

    <!-- 年月日timepicker -->
    <van-datetime-picker
      v-model="currentDate"
      type="date"
      title="选择年月日"
      :min-date="minDate"
      :max-date="maxDate"
    />
    <!-- 年月日timepicker -->

    <!-- 年月timepicker -->
    <van-datetime-picker
      v-model="currentDate"
      type="year-month"
      title="选择年月"
      :min-date="minDate"
      :max-date="maxDate"
      :formatter="formatter"
    />
    <!-- 年月timepicker -->
    <!-- 月日timepicker -->
    <van-datetime-picker
      v-model="currentDate"
      type="month-day"
      title="选择月日"
      :min-date="minDate"
      :max-date="maxDate"
      :formatter="formatter"
    />
    <!-- 月日timepicker -->
    <!-- 完整时间timepicker -->
    <van-datetime-picker
      v-model="currentDate"
      type="datetime"
      title="选择完整时间"
      :min-date="minDate"
      :max-date="maxDate"
    />
    <!-- 完整时间timepicker -->
  </div>
</template>

<script>
// https://vant-contrib.gitee.io/vant/#/zh-CN/datetime-picker
import { DatetimePicker, Popup, Button } from "vant";
export default {
  components: {
    vanDatetimePicker: DatetimePicker,
    vanPopup: Popup,
    vanButton: Button,
  },
  data() {
    return {
      popShow: false,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(2021, 0, 17),
      //过滤器
      formatter: (type, val) => {
        if (type === "hour") {
          return `${val}时`;
        }
        if (type === "minute") {
          return `${val}分`;
        }
        if (type === "year") {
          return `${val}年`;
        }
        if (type === "month") {
          return `${val}月`;
        }
        return val;
      },
    };
  },
  mounted() {},
  methods: {
    popClickShow() {
      this.popShow = true;
    },
    pickerChange(e, value) {
      console.log(e, value);
    },
    commit() {
      let picker = this.$refs.datetimePicker.getPicker();
      console.log(picker);
    },
  },
};
</script>

<style lang="less" >
.popup-div {
  display: flex;
  justify-content: center;
  margin: 10px;
}
.picker-top-div {
}
.picker-bottom-div {
  display: flex;
  justify-content: space-between;
  border-top: var(--border) solid 1px;
  padding: 10px 10px 0px 10px;
}
</style>
